<template>
  <div
    class="nodeClass"
    ref="node"
    :style="nodeContainerStyle"
    @click="clickNode"
    @mouseup="changeNodeSite"
    :class="nodeContainerClass"
    @contextmenu.prevent="contextMenu($event, node)"
  >
    <!-- 最左侧的那条竖线 -->
    <!--        <div class="ef-node-left"></div>-->
    <!-- 节点类型的图标 -->
    <!-- <div class="ef-node-left-ico flow-node-drag">
         v-show="!eventArr.includes(this.node.type)"
      <i :class="nodeIcoClass"></i>
    </div> -->
    <div class="toLine ef-node-left-ico flow-node-drag"></div>
    <!-- 节点名称 -->

    <div class="ef-node-text">
      {{ node.name }}
    </div>
    <!-- 节点状态图标 -->
    <!--        <div class="ef-node-right-ico">-->
    <!--            <i class="el-icon-circle-check el-node-state-success" v-show="node.state === 'success'"></i>-->
    <!--            <i class="el-icon-circle-close el-node-state-error" v-show="node.state === 'error'"></i>-->
    <!--            <i class="el-icon-warning-outline el-node-state-warning" v-show="node.state === 'warning'"></i>-->
    <!--            <i class="el-icon-loading el-node-state-running" v-show="node.state === 'running'"></i>-->
    <!--        </div>-->

    <vue-context-menu
      :contextMenuData="contextMenuData"
      @deleteData="deleteData"
    ></vue-context-menu>
  </div>
</template>

<script>
export default {
  props: {
    node: Object,
    activeElement: Object
  },
  data () {
    return {
      taskArr: ['taskUp', 'taskAnd', 'taskDown', 'taskOr'],
      endArr: ['endAlert', 'endNotice'],
      eventArr: ['begin', 'end'],

      contextMenuData: {
        // 菜单名称
        menuName: 'rightMenu',

        // 菜单显示的坐标位置
        axis: {
          x: null,
          y: null
        },
        // 菜单选项
        menulists: [
          {
            // 绑定事件
            fnHandler: 'deleteData',

            // icon图标
            icoName: 'el-icon-close',

            // 菜单选项名称
            btnName: '删除节点'
          }
        ]
      }
    }
  },
  created () {
    // console.log(this.node);
  },
  computed: {
    nodeContainerClass () {
      return {
        'ef-node-container': true,
        'ef-node-active':
          this.activeElement.type == 'node'
            ? this.activeElement.nodeId === this.node.id
            : false,
        nodeClassRed: this.endArr.includes(this.node.type),
        nodeClassBlue: this.taskArr.includes(this.node.type),
        nodeClassYellow: this.node.type === 'deviceDataSource',
        nodeClassEvent: this.eventArr.includes(this.node.type)
      }
    },
    // 节点容器样式
    nodeContainerStyle () {
      return {
        top: this.node.top,
        left: this.node.left
      }
    },
    nodeIcoClass () {
      var nodeIcoClass = {}
      nodeIcoClass[this.node.ico] = true
      // 添加该class可以推拽连线出来，viewOnly 可以控制节点是否运行编辑
      nodeIcoClass['flow-node-drag'] = !this.node.viewOnly
      return nodeIcoClass
    }
  },
  methods: {
    deleteData () {
      // 删除数据
      //   this.$message({ type: "info", message: "删除数据" });
      this.$emit('deleteElement')
    },
    contextMenu (e, node) {
      // 右键单击事件（修改菜单显示坐标）
      const x = e.clientX
      const y = e.clientY
      console.log(e, node)
      this.contextMenuData.axis = { x, y }
      this.$emit('clickNode', node.id)
    },
    // 点击节点
    clickNode () {
      this.$emit('clickNode', this.node.id)
    },
    // 鼠标移动后抬起
    changeNodeSite () {
      // 避免抖动
      if (
        this.node.left == this.$refs.node.style.left &&
        this.node.top == this.$refs.node.style.top
      ) {
        return
      }
      this.$emit('changeNodeSite', {
        nodeId: this.node.id,
        left: this.$refs.node.style.left,
        top: this.$refs.node.style.top
      })
    }
  }
}
</script>

<style scoped>
.nodeClassRed {
  border: 3px solid red;
}

.nodeClassBlue {
  border: 3px solid #46a6ff;
}

.nodeClassYellow {
  border: 3px solid #ffd70a;
}

.nodeClassEvent {
  color: red;
  height: 50px;
  width: 80px;
  border-radius: 50%;
  line-height: 50px;
  border: 3px solid black;
}

.toLine {
  /* background-color: #f40; */
  position: absolute;
  width: 20px;
  height: 100%;
}

.vue-contextmenuName-rightMenu {
  /* background-color: #051601 !important; */
  padding: 0 2px;
  padding-bottom: 2px;
}

/* /deep/ .vue-contextmenu-listWrapper .context-menu-list[data-v-1931f86e] {
  margin-left: -37px;
} */
</style>
